<!DOCTYPE html>
<html lang="en">

<head>
    <title>在线咨询</title>
    <titleType style="display: none;">index</titleType>
    <%- include('../../_global/baseLibs') %>
        <script src="/static/lib/plupload/plupload.full.min.js"></script>
        <script src="/static/lib/plupload/i18n/zh_CN.js"></script>
        <script src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
        <script src="/static/js/crypto-js.js"></script>
        <script src="/static/lib/touchslider.js"></script>
        <script type="text/javascript" src="/static/js/iscroll.js"></script>
        <script type="text/javascript" src="/static/js/qiniu.min.js"></script>

        <style>
            .page-info .user-box.next {
                text-align: center;
            }

            .page-info .user-box.next {
                margin-top: 0rem;
            }

            /* .page-info .user-box.next:before {
                content: '';
                position: absolute;
                left: 0;
                top: 0;
                right: auto;
                height: 1px;
                width: 100%;
                background-color: #cfcfcf;
                display: block;
                z-index: 15;
                transform-origin: 50% 0%;
            } */

            .page-info .add-box {
                position: relative;
                padding-bottom: 1rem;
            }

            .page-info .poster-box .add-img {
                margin-left: 1.9rem;
            }

            .page-info .user-box1 {
                padding: 0 0.825rem 0 1.1rem;
            }

            @media only screen and (-webkit-min-device-pixel-ratio: 2) {
                .page-info .user-box.next:before {
                    transform: scaleY(0.5);
                }
            }

            .page-info .user-box .text-center {
                position: relative;
                display: inline-block;
            }

            .page-info .user-box .text-center:before {
                position: absolute;
                top: 1.85rem;
                right: 5rem;
                content: '';
                width: 5rem;
                height: 1px;
                background: #cfcfcf;
            }

            .page-info .user-box .text-center:after {
                position: absolute;
                top: 1.85rem;
                left: 5rem;
                content: '';
                width: 5rem;
                height: 1px;
                background: #cfcfcf;
            }

            @media only screen and (-webkit-min-device-pixel-ratio: 2) {
                .page-info .area-box:after {
                    transform: scaleY(0.5);
                }
            }

            .page-info .area-box:after {
                content: '';
                position: absolute;
                left: 0;
                bottom: 0;
                right: auto;
                top: auto;
                height: 1px;
                width: 100%;
                background-color: #cfcfcf;
                display: block;
                z-index: 15;
                transform-origin: 50% 100%;
            }

            /* .page-info .poster-box:before {
                content: '';
                position: absolute;
                left: 0;
                top: 0;
                right: auto;
                height: 1px;
                width: 100%;
                background-color: #cfcfcf;
                display: block;
                z-index: 15;
                transform-origin: 50% 0%;
            } */

            @media only screen and (-webkit-min-device-pixel-ratio: 2) {
                .page-info .poster-box:before {
                    transform: scaleY(0.5);
                }
            }

            @media only screen and (-webkit-min-device-pixel-ratio: 3) {
                .page-info .poster-box:before {
                    transform: scaleY(0.33);
                }
            }

            .page-info .poster-box .add-box:after {
                content: '';
                position: absolute;
                left: 0;
                bottom: 0rem;
                right: auto;
                top: auto;
                height: 1px;
                width: 100%;
                background-color: #cfcfcf;
                display: block;
                z-index: 15;
                transform-origin: 50% 100%;
            }

            @media only screen and (-webkit-min-device-pixel-ratio: 2) {
                .page-info .poster-box:after {
                    transform: scaleY(0.5);
                }
            }

            @media only screen and (-webkit-min-device-pixel-ratio: 3) {
                .page-info .poster-box:after {
                    transform: scaleY(0.33);
                }
            }

            .page-info .area-box {
                position: relative;
            }

            .page-info .poster-box {
                position: relative;
                /* padding-top: 1rem; */
                padding-left: 0rem;
            }

            .page-info .poster-box .poster-text {
                display: inline-block;
                width: 17.5rem;
                font-size: 0.9rem;
                white-space: nowrap;
                position: relative;
                top: .8rem;

            }

            .page-info .poster-box .poster-text .text1 {
                /* position: absolute;
                top: -0.5rem;
                left: 0;  */
                display: block;
                width: 17.5rem;
                font-size: 0.9rem;
                white-space: nowrap;
                color: #333;
            }

            .page-info .poster-box .poster-text .text2 {
                /* position: absolute;
                top: 1.5rem;
                left: 0; */
                display: block;
                width: 17.5rem;
                font-size: 1.05rem;
                white-space: nowrap;
                color: #8e8e8e;
            }

            .page-info .poster-box .poster-text {
                margin-left: 10px;

            }

            .page-user .tips-text {
                height: 2.5rem;
                line-height: 2.5rem;
            }

            .page-user {
                background-color: #fff;
                width: 100%;
                overflow: hidden;
            }

            .uploadIMGBox {
                width: 55px;
                margin: 5px;
                float: left
            }

            .delIMG {
                line-height: 20px;
                text-align: center;
            }

            .uploadIMGBox img {
                width: 55px;
                height: 53px;
            }

            .page-info .poster-box {
                line-height: 1.6rem;
            }


            /* 图片滚动 */

            #viewport {
                position: relative;
                width: 100%;
                height: 100%;
                margin: 0 auto;

                overflow: hidden;
            }

            #wrapper {
                width: 100%;
                height: 100%;
                margin: 0 auto;
            }

            #scroller {
                position: absolute;
                z-index: 1;
                -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
                width: 800px;
                height: 240px;
                -webkit-transform: translateZ(0);
                -moz-transform: translateZ(0);
                -ms-transform: translateZ(0);
                -o-transform: translateZ(0);
                transform: translateZ(0);
                -webkit-touch-callout: none;
                -webkit-user-select: none;
                -moz-user-select: none;
                -ms-user-select: none;
                user-select: none;
                -webkit-text-size-adjust: none;
                -moz-text-size-adjust: none;
                -ms-text-size-adjust: none;
                -o-text-size-adjust: none;
                text-size-adjust: none;

            }

            .slide {
                width: 15rem;
                height: 10rem;
                float: left;
            }

            .painting {
                width: 15rem;
                height: 10rem;
                border-radius: 10px;
                margin: 20px auto;


            }

            #imgContainer {
                margin-left: 1.9rem;
            }
        </style>


</head>

<body>
    <section class="page-wrap page-info page-user">
        <!--内容-->
        <!-- <div class="plane-box first">
            <div class="tips-text">
                咨询我的家庭医生
            </div>
            <ul class="default-list" id="docList">
                <li>
                    <div class="item-inner big-box">
                        <div class="doc-box  item-media">
                            <img src="/static/images/doctor/doc.png">
                        </div>
                        <div class="text-box item-content">
                            <p class="doc-base">
                                <span class="doc-name">王超</span>
                                <span class="doc-job">副主任医师</span>
                            </p>
                            <p class="doc-base">
                                <span>签约时间：</span>2018-03-22</p>
                        </div>
                    </div>
                </li>
            </ul>
        </div> -->


        <!-- <div class="user-box">
            <div class="row left-con">
                <span class="span-text">性别</span>
                <div class="sex-box">
                    <span class="default-sex active">男</span>
                    <span class="default-sex ">女</span>
                </div>
            </div>
            <div class="row right-con">
                <span class="span-text">年龄</span>
                <span class="user-age">
                    <input type="text" />
                </span>
            </div>
        </div> -->
        <div class="user-box1 next user-box">
            <span class="text-center">病情描述</span>
        </div>
        <div class="area-box">
            <textarea class="txt" placeholder="请详细的描述您的病情、症状、治疗经过以及想要获得的帮助，如需咨询家人情况，请简单描述下家人的年龄和性别 （20~500字）"></textarea>
        </div>
        <div id="postContainer" class="poster-box" style="height: auto;">
            <div class="add-box">
                <i id="uploader" class="add-img"></i>
                <p class="poster-text">
                    <span class="text1">可上传患处、病例、检查单等图片(最多9张)</span>
                    <span class="text2">照片仅自己和医生可见</span>
                </p>
            </div>

            <div id="imgContainer" class="clearfix">
                <!-- <div id="viewport">
                    <div id="wrapper">
                        <div id="scroller">
                            
                        </div>
                    </div>
                </div> -->

            </div>
            <div id="myDiv"></div>

            <div class="submit-btn">
                <a href="javascript:void(0);" id="zxzxSubmit" class="btn btn-big">提交</a>
            </div>

        </div>


        <!--内容END-->

    </section>
    <script>
        var page_consultAsk = (function ($, page_consultAsk) {
            // var key = "jkcs";
            var uri_service_uploadtoken = "/api/gzd/question/files/uploadtoken";
            var uri_service_getSignature = "/api/gzd/ticket/getSignature";
            var conf = "";
            var urld = window.location.href.split('#')[0];
            var arr = [];
            var arrImgQiNiu = [];
            var arrWeChatImg = [];
            var qiniuUriStr = "";
            var upLoadAjax = function (base64_code) {
                // layer.closeAll();
                // var index = layer.open({
                //     type: 2
                // });
                //图片插入页面
                //                var img="<img src='"+base64_code+"' />";
                // var img = '<div class="slide">' +
                //             '<div class="uploadIMGBox painting giotto">' +
                //                 '<img id="loadImg" src=" ' + base64_code + '" />' +
                //                 '<div class="delIMG">删除</div>' +
                //             '</div>'+
                //           '</div>';
                for (key in base64_code) {
                    var img = '<div class="uploadIMGBox">' +
                        '<img class="loadImg" src=" ' + base64_code[key] + '" />' +
                        '<div class="delIMG">删除</div>' +
                        '</div>';

                    $("#imgContainer").append(img);


                    arr.push({
                        img: base64_code
                    });
                }



                //滑动效果初始化
                // var myScroll = new IScroll('#wrapper', {
                //     scrollX: true,
                //     scrollY: false,
                //     momentum: false,
                //     snap: true,
                //     snapSpeed: 400,
                //     keyBindings: true,
                //     indicators: {
                //         el: document.getElementById('indicator'),
                //         resize: false
                //     }
                // });

                // document.addEventListener('touchmove', function (e) {
                //     //阻止其他滑动效果
                //     //  e.preventDefault(); 
                // }, isPassive() ? {
                //     capture: false,
                //     passive: false
                // } : false);

            };


            var cfg_def = {
                upLoadZxzxMessage: upLoadZxzxMessage,
                upLoadAjax: upLoadAjax,
                removeByValue: removeByValue,
                configWxAPI: configWxAPI,
                putb64: putb64
            }
            //        上传图片


            page_consultAsk.init = function (cfg) {
                $.extend(page_consultAsk, cfg_def, cfg);

                $("#postContainer").on("click", ".delIMG", function () {
                    var that = $(this).parent(".uploadIMGBox");
                    var indexPic = $(this).parent(".uploadIMGBox").index();

                    layer.open({
                        content: '您确定要删除该图片吗？',
                        btn: ['确定', '取消'],
                        yes: function (index) {
                            layer.close(index);
                            that.remove();

                            page_consultAsk.removeByValue(arr, indexPic);

                        }
                    });
                    return false;
                });
                // page_consultAsk.upLoadUserImg();


                // config

                // fetch("https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=10_sl_-JNmwYKMl_ULss2BYAfuLU6jxvvBzRWJpqT3xD5derbNxH4Tgcmc8NYahs_YSQ90fz3-E6zz1vrAo1k2j4GD7QnFWutBL1KThuiUa0iB_8xDlG1rhDb2DaBtZrdX4JwZjGxvdYg5mhmeQGCShAJAQMC&type=jsapi",{method:"get",mode: 'no-cors',}).then((res) => {
                //     console.log(res)
                // })
                $.QuickRemote.AjaxJson({
                    funcName: uri_service_getSignature,
                    params: {
                        url: urld
                    },
                    callback: function (conf) {
                        page_consultAsk.configWxAPI(conf);
                        var conf = conf.url;
                        return conf;
                    }
                })

                // 获取token
                $.QuickRemote.AjaxJson({
                    funcName: uri_service_uploadtoken,
                    callback: function (res) {
                        $("body").data("token", res);

                    }

                });


                //        提交患者信息
                $(".submit-btn").on("click", "#zxzxSubmit", function () {

                    // var status = 2; //0:结束 1:解答中 2：待解答

                    // var age = $(".user-age input").val();
                    var ZXFW_HZXX = StoreCache.getCache("jkcsUserInfo");
                    // var userId = ZXFW_HZXX.userid;
                    var content = $(".txt").val();
                    if (content == "") {
                        layer.open({
                            content: '病情描述不能为空',
                            skin: 'msg',
                            time: 2 //2秒后自动关闭
                        });
                    } else {

                        if (arr.length == 0) {

                            page_consultAsk.upLoadZxzxMessage(content);
                        } else {
                            var token = $("body").data("token");
                            for (var i = 0; i < arrWeChatImg.length; i++) {
                                    var pic;
                                    if (arrWeChatImg[i].indexOf("base64") != -1) {
                                        pic = arrWeChatImg[i].split("base64,")[1];
                                    } else {
                                        pic = arrWeChatImg[i];
                                    }
                                page_consultAsk.putb64(pic, token, content);

                            }
                        }
                    }
                    return false;
                })

            }



            function configWxAPI(conf) {

                wx.config({
                    debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
                    appId: 'wx19000fcda6138605', // 必填，公众号的唯一标识
                    timestamp: conf.timestamp, // 必填，生成签名的时间戳
                    nonceStr: conf.noncestr, // 必填，生成签名的随机串
                    signature: conf.signature, // 必填，签名
                    jsApiList: [
                        "chooseImage"
                    ] // 必填，需要使用的JS接口列表
                });

                wx.ready(function () {
                    // 微信上传代码
                    // 点击更换按钮
                    $('#uploader').click(function () {
                        wx.chooseImage({
                            count: 9, // 默认9 选择几张照片
                            sizeType: ['compressed'], // 可以指定是原图还是压缩图，默认二者都有
                            sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
                            success: function (res) {
                                var localIds = res.localIds; // 返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片
                                for(var i = 0; i < localIds.length; i++) {
                                    wx.getLocalImgData({
                                        localId: localIds[i],
                                        success: function (res) {
                                            
                                            var localData = res.localData;
                                            localData = localData.replace('jgp', 'jpeg');
                                            arrWeChatImg.push(localData);

                                        }
                                    });
                                }
                                if (arr.length >= 9) {
                                    $(".add-box").hide();
                                    layer.open({
                                        content: '最多上传9张照片',
                                        skin: 'msg',
                                        time: 2 //2秒后自动关闭
                                    });
                                    return false;
                                }
                                page_consultAsk.upLoadAjax(localIds);
                            }
                        });
                        // wx.error(function (conf) {
                        //     console.log(conf);
                        //     // config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
                        // });
                    })

                });




            }


            function putb64(pic, token, content) {

                var url = "http://upload.qiniup.com/putb64/-1"; //非华东空间需要根据注意事项 1 修改上传域名
                var xhr = new XMLHttpRequest();
                xhr.onreadystatechange = function () {
                    if (xhr.readyState == 4) {
                        // document.getElementById("myDiv").innerHTML = xhr.responseText;
                        // alert(JSON.parse(xhr.responseText)[
                        //     "key"])

                        var imgUrl = "http://p8suo2qmf.bkt.clouddn.com/" + JSON.parse(xhr.responseText)[
                            "key"];
                        arrImgQiNiu.push(imgUrl);
                        if (arrImgQiNiu.length == arr.length) {
                            for (var i = 0; i < arrImgQiNiu.length; i++) {
                                
                                qiniuUriStr += arrImgQiNiu[i] + ",";
                            }
                            qiniuUriStr = qiniuUriStr.substring(qiniuUriStr.length - 1, 0);
                            page_consultAsk.upLoadZxzxMessage(content, qiniuUriStr);
                        }
                    }
                }
                xhr.open("POST", url, true);
                xhr.setRequestHeader("Content-Type", "application/octet-stream");
                xhr.setRequestHeader("Authorization", "UpToken " + token);
                xhr.send(pic);
            }

            

            function removeByValue(arr, val) {
                //                    console.log(arr);
                for (var i = 0; i < arr.length; i++) {
                    if (i == val) {
                        arr.splice(i, 1);
                        console.log(arr);
                        if (arr.length < 9) {
                            $("#uploader").show();
                            $(".poster-text").show();
                        }
                        break;
                    }
                }
            }



            function upLoadZxzxMessage(content, imageUri) {
                var params = {
                    content: content,
                    imageUri: imageUri ? imageUri : ""
                };


                $.QuickRemote.AjaxJson({
                    funcName: "/api/gzd/question/question",
                    callback: function (data) {
                        $.QuickAlert.alertNormal("提交成功", {
                            callback: function () {
                                $.pageSwitch.goToUrl("index", "index");
                            }
                        });
                    },
                    params: params
                })
            }

            return page_consultAsk;
        })(jQuery, {});
    </script>
</body>

</html>